/* eslint-disable */
<<template>
    <div class="component" 
        :id="'wapper_'+$props.target.name" 
        :style="{
            width: $props.target.props.width.value+'px',
            height: $props.target.props.height.value+'px',
            top: $props.target.props.top.value+$props.pageIndex*$props.pageHeight+'px',
            left: $props.target.props.left.value+'px'
        }" 
        tabindex="-1">
        <div class="component-content-warpper" :style="{
                background:$props.target.props.background.value,
                borderWidth:$props.target.props.borderWidth.value+'px',
                borderStyle:$props.target.props.borderStyle.value,
                borderColor:$props.target.props.borderColor.value
            }">
            <div class="component-content">
                <designer-component-chart v-if="$props.target.type==='chart'" :target="$props.target" :id="$props.target.name"/>
                <designer-component-text v-if="$props.target.type==='text'" :target="$props.target" :id="$props.target.name"/>
                <designer-component-table v-if="$props.target.type==='table'" :target="$props.target" :id="$props.target.name"/>
                <designer-component-pivot v-if="$props.target.type==='pivot'" :target="$props.target" :id="$props.target.name"/>
            </div>
        </div>
    </div>
</template>
<style lang="less" scoped>
    @border-size:3px;
    @border-color:#999;
    .component {
        display:inline-block;
        position: absolute; 
        outline: none;  
    }
    .component-content-warpper{
        display:inline-block;
        position: absolute;
        top: @border-size;
        left: @border-size;
        right:@border-size;
        bottom: @border-size; 
    }
    .component-content{
        display:block;
        height:100%;
        width:100%;
        position: absolute;
        top:0px;
        overflow: hidden;
    }
</style>
<script>
import 'vue-awesome/icons'
import Icon from 'vue-awesome/components/Icon'
import DesignerComponentChart from './DesignerComponentChart'
import DesignerComponentText from './DesignerComponentText'
import DesignerComponentTable from './DesignerComponentTable'
import DesignerComponentPivot from './DesignerComponentPivot'
export default {
    props: {
        target: Object,
        pageIndex: Number,
        pageHeight: Number
    },
    data () {
        return {
            focus: true,
            ds: null
        }
    },
    components: {
        Icon,
        DesignerComponentChart,
        DesignerComponentTable,
        DesignerComponentText,
        DesignerComponentPivot
    },
    mounted (){
    }
}
</script>
